Design System Vitalino
Gerador de Cores Acessíveis
Ao criar o Design System Vitalino, nosso princípio principal sempre foi o de abraçar o Design Universal e fazer com que nossos componentes fossem acessíveis para o maior número de pessoas, independentemente das suas habilidades ou deficiências.
Como as cores desempenham um papel fundamental na usabilidade e na experiência do usuário, desenvolvemos uma lógica especial de aplicação na interface para que fossem dinâmicas e se adaptassem a diferentes cenários e condições de uso - inclusive entre o modos claro e escuro.
Para essa lógica, precisamos limitar a quantidade de cores e garantir que a aplicação de uso entre elas fosse acessível. Por isso, a partir de cada cor é gerada uma paleta básica para uso em interfaces com três tons: a cor base (base), uma forte (strong) e uma suave (soft). As únicas cores que fogem dessa regra e possuem subvariações são as cores Neutral e Fixed.
As cores fixas, tons de cores neutros que não mudam entre os modos claro e escuro, também possuem variáveis que podem ser alteradas no tema. Essas cores são utilizadas principalmente em telas que devem permanecer com os mesmos tons, como por exemplo, em uma tela de leitura de QR Code, onde a cor da máscara da câmera é sempre uma cor escura.
Acessibilidade não é só contraste
Apesar de o contraste ser uma forma eficiente de garantirmos uma acessibilidade mínima para nossos usuários, ele sozinho não garante que a interface seja acessível. Utilizamos também outras estratégias para viabilizar a melhor experiência para os usuários, incluindo tamanhos de fonte mínimos e personalizáveis, além de codificação correta para leitores de tela, dentre outras.
Tokens
Para a organização das cores, usamos dois tipos de tokens, os primitivos e os semânticos:
Primitivos
São aqueles que não tem uma função definida e podem ser usados diretamente, ou ainda, como parte de valores de dentro de tokens semânticos ou de componente:
$color-tomato-base: #DA0B38;
Semânticos
São aqueles relacionados a um contexto ou abstração específica. Eles ajudam a comunicar a intenção proposta mais efetivamente. Geralmente, esse tipo de tokens são usados em componentes com a mesma lógica:
$color-primary-base: #277AB8;
$color-danger-strong: $color-tomato-strong;
$color-danger-strong: $color-tomato-strong;
Gerador de Cores Acessíveis
Tendo definido e testado a lógica de cores, o próximo passo foi automatizar a criação desses tons para agilizar nosso trabalho e ainda, garantir que os valores criados estivessem de acordo o padrão AA do WCAG.
Quando a cor inserida não passa no teste, o sistema procura na paleta cromática qual o próximo tom indicado e o informa para o usuário.
Tela do Gerador de Cores Acessíveis do Vitalino
Além das cores destinadas à interface, o Gerador de Cores Acessíveis do Vitalino também cria uma paleta completa de cada tonalidade em forma de imagem. Essa função permite que os designers façam o download da paleta e a utilizem em ilustrações, expandindo a aplicação das cores de forma criativa e harmoniosa em todo o ecossistema.
Próximos passos
Para expandir as possibilidades de criação com o Gerador, queremos também que ele mostre mais paletas de cores relacionadas à cor base, como as análogas e complementares para serem aplicadas em ilustrações.
■
